<template>
  <div class="personalData">
    <van-nav-bar
        title="个人资料"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="blue"></div>
    <div class="container">
      <van-cell-group inset :clickable="true" v-if="userInfo">
        <van-cell title="头像" center>
          <template #right-icon>
            <van-uploader :after-read="updateAvatar">
              <img class="user-icon" :src="userInfo.userImg">
            </van-uploader>
          </template>
        </van-cell>
        <van-cell title="用户id" :value="userInfo.userId" value-class="black"/>
        <van-cell title="昵称" :value="userInfo.nickName" is-link value-class="black" @click="show=true"/>
        <van-cell
            title="简介"
            @click="showDesc=true"
            :value="userInfo.desc===''?'这家伙很懒，什么都没有留下！':userInfo.desc"
            :value-class="userInfo.desc>10 || userInfo.desc===''?'desc':'black'"
            size="large"/>
      </van-cell-group>
    </div>
    <!--  修改昵称  -->
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <!--    标题栏      -->
          <div class="top">
            <div class="title">修改用户名</div>
            <div class="icon" @click="show=false">
              <van-icon name="cross"/>
            </div>
          </div>
          <!--    输入框      -->
          <div class="main">
            <div class="nickName">
              <input type="text" v-model="nickName" :placeholder="userInfo.nickName">
            </div>
            <div class="icon" @click="nickName=''">
              <van-icon name="clear"/>
            </div>
          </div>
          <!--    提交按钮      -->
          <div class="btn">
            <button type="submit" @click="updateNickName()">提交</button>
          </div>
        </div>
      </div>
    </van-overlay>
    <!--   修改信息  -->
    <van-overlay :show="showDesc" @click="showDesc = false">
      <div class="desc" @click.stop>
        <div class="block">
          <!--    标题栏      -->
          <div class="top">
            <div class="title">修改简介</div>
            <div class="icon" @click="showDesc=false">
              <van-icon name="cross"/>
            </div>
          </div>
          <!--    输入框      -->
          <div class="main">
            <textarea v-model="desc"></textarea>
          </div>
          <!--    提交按钮      -->
          <div class="btn">
            <button type="submit" @click="updateDesc()">提交</button>
          </div>
        </div>
      </div>
    </van-overlay>

  </div>

</template>

<script>
import {findAccountInfo, updateAvatar, updateDesc, updateNickName} from "@/api/my";

export default {
  name: "personalData",
  data() {
    return {
      show: false,
      userInfo: [],
      nickName: "",
      tokenString: '',
      avatar: [],
      showDesc: false,
      desc: ''
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let tokenString = this.$cookies.get("tokenString");
      this.tokenString = tokenString;
      let self = this;
      if (!tokenString) return this.$router.push({name: 'login'});
      findAccountInfo({
        appkey: this.appkey,
        tokenString: tokenString
      }).then(res => {
        if (res.data.code === "B001") {
          self.userInfo = res.data.result[0]
        }
      })
    },
    // 修改昵称
    updateNickName() {
      let self = this;
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        nickName: self.nickName
      }
      updateNickName(data).then(res => {
        if (res.data.code === 700) {
          this.$toast.fail({
            message: '修改昵称失败，请重新登录！',
            duration: 1500
          });
        } else if (res.data.code === "C001") {
          this.$toast.success({
            message: '修改昵称成功',
            duration: 1500
          });
          this.init();
          this.show = false;
          this.nickName = '';
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
    },
    //  上传头像接口
    updateAvatar(file) {
      /**
       *  说明：上传图片时，先获取base64码，再将base64码前面的 data:image/jpeg;base64, 去除
       *    剩下的base64码就是后台需要的的内容
       *    去除 data:image/jpeg;base64, 方法
       *    可以使用 replace(/^data:image\/[A-Za-z]+;base64,/, '') 处理
       */
      let self = this;
      let serverBase64Img = file.content.replace(/^data:image\/[A-Za-z]+;base64,/, '');
      let img = file.file.type;
      let imgType = img.substring(img.indexOf('/') + 1);
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        imgType: imgType,
        serverBase64Img: serverBase64Img
      }
      updateAvatar(data).then(res => {
        if (res.data.code === "H002") {
          self.$toast.fail(res.data.msg)
        } else if (res.data.code === 'H001') {
          self.$toast.success(res.data.msg)
          self.init();
        } else {
          self.$toast.fail(res.data.msg)
        }
      })
    },
    //   修改简介
    updateDesc() {
      let self = this;
      if (self.desc.length === 0) {
        this.$toast.fail('简介字数不能为零！')
        return;
      }
      let data = {
        appkey: self.appkey,
        tokenString: self.tokenString,
        desc: self.desc
      }
      updateDesc(data).then(res => {
        if (res.data.code === "D001") {
          self.$toast.success({
            message: res.data.msg,
            duration: 1500
          });
          self.init();
          self.showDesc = false;
        } else if (res.data.code === 700) {
          self.$toast.fail("登录信息错误，请重新登录！")
          self.$router.push('/login')
        } else {
          self.$toast.fail(res.data.msg);
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.personalData {
  background-color: #f7f7f7;

  .blue {
    background: #0c34ba;
    width: 100%;
    height: 100px;
  }

  .container {
    background: #ffffff;
    margin: -30px 10px 0 10px;
    border-radius: 15px;

    .desc {
      text-align: left;
      color: black;
    }

    .black {
      color: black;
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      width: 80%;
      height: 210px;
      background-color: #fff;
      border-radius: 15px;

      .top {
        height: 50px;
        background-color: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #898989;
        font-size: 16px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;

        .icon {
          position: fixed;
          margin-left: 70%;
        }
      }

      .main {
        background: #f6f6f6;
        margin: 30px 10px;
        display: flex;
        color: black;

        .nickName {
          flex: 8;
          background: #f6f6f6;

          input {
            background: #f6f6f6;
            width: 100%;
            height: 35px;
            line-height: 35px;
          }
        }

        .icon {
          flex: 1;
          text-align: center;
          line-height: 35px;
          font-size: 20px;
          color: #999;
        }
      }

      .btn {
        text-align: center;
        margin-top: 30px;

        button {
          width: 90%;
          height: 40px;
          background: #0c34ba;
          line-height: 40px;
          color: white;
          border: none;
          border-radius: 15px;
        }
      }
    }
  }

  .desc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      width: 80%;
      height: 210px;
      background-color: #fff;
      border-radius: 15px;

      .top {
        height: 50px;
        background-color: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #898989;
        font-size: 16px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;

        .icon {
          position: fixed;
          margin-left: 70%;
        }
      }

      .main {
        background: #f6f6f6;
        margin: 20px 10px;
        color: black;

        textarea {
          width: 100%;
          height: 50px;
        }
      }

      .btn {
        text-align: center;
        margin-top: 30px;

        button {
          width: 90%;
          height: 40px;
          background: #0c34ba;
          line-height: 40px;
          color: white;
          border: none;
          border-radius: 15px;
        }
      }
    }
  }


}

.user-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
</style>
